<!-- 页面标题 -->
<template lang="pug">
div
  icon-back.back.v-center(@click.native="backPage")
  div.title.center {{ pageTitle }}
  div.filter.v-center(v-if="hasFilter" @click="$emit('click-filter')") 筛选
  div.v-center.slot-right
    slot(name="right")
</template>

<script>
/*
  事件
    click-filter  点击筛选按钮
*/

export default {
  name: "PageHeader",
  props: {
    // 标题文字
    pageTitle: {
      type: String,
      default: "",
    },
    // 是否显示筛选按钮
    hasFilter: {
      type: Boolean,
      default: false,
    },
    // 返回按钮的点击回调
    back: {
      type: Function,
    },
  },
  data() {
    return {
    }
  },
  methods: {
    backPage() {
      if (this.back) {
        this.back()
      } else {
        this.$root.Back()
      }
    },
  },
}
</script>

<style lang="stylus" scoped>

.c-root
  z-index: 1
  position: relative
  top: 0
  left: 0
  right: 0
  header-style()

.v-center
  position: absolute
  top: 50%
  transform(translateY(-50%))

.center
  position: absolute
  top: 50%
  left: 50%
  transform(translate(-50%,-50%))

.back
  left: header-h-padding

.title
  color: header-color
  max-width: 60%
  text-ellipsis()

.filter
  right: header-h-padding
  font-size: 16px
  font-weight: normal

.slot
  &-right
    right: 1rem
    font-size: 20px
    // font-size: 16px

</style>
